<template>
  <div class="work_progress_trace">
    <one-title title="工单进度追踪" @refreshData="refresh">
    </one-title>
    <div class="task_tree_container">
      <task-bom-tree ref="taskBomTree" @selectNode="selectNode"></task-bom-tree>
      <div class="task_tree_content">
        <mes-search-comp
          :searchList="tableColConfig"
          :searchResult="searchResult"
          ref="mesSearchs"
          :showSlotSet="true"
          @setCol="$refs.ColumnControl.openDialog()"
          @searchInfo="_info">
        </mes-search-comp>
        <!--生产调度列表-->
        <div class="table_container">
          <el-table
            ref="tableNode"
            border
            stripe
            v-loading="isLoading"
            style="width: 100%"
            :data="listData.list"
            :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
            @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
            @sort-change="_sort"
            @selection-change="handleSelectionChange"
            @filter-change="handleFilterChange">
            <el-table-column
              fixed="left"
              align="center"
              type="selection"
              :disabled="true"
              width="40">
            </el-table-column>
            <mes-col-comp
              :key="index"
              v-for="(column, index) in columnList"
              :column="column">
            </mes-col-comp>
            <el-table-column
              fixed="right"
              :resizable="false"
              min-width="88"
              label="操作"
              class-name="operation_btn"
              align="center">
              <template slot-scope="scope">
                <span class="jump_item" @click.stop="showLog(scope.row)">操作记录</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <mes-pagination
          @updateData="init"
          :currentPage="listData.pageNo"
          :total="listData.count || 0"
          :pageSize="listData.pageSize"
          :pageSelectShow="false">
        </mes-pagination>
        <!--列隐藏-->
        <column-control
          ref="ColumnControl"
          :colList="tableColConfig"
          @saveCol="saveCol"
        ></column-control>
        <!--周转批次-->
        <normal-batch-list ref="NormalBatchList"></normal-batch-list>
        <!-- 日志详情 -->
        <log-detail ref="logDetail"></log-detail>
      </div>
    </div>
  </div>
</template>

<script>
import NormalBatchList from './components/NormalBatchList'
import tableColConfig from './workOrderColumn'
export default {
  name: 'WorkorderProgressTrace',
  components: {
    NormalBatchList
  },
  data() {
    return {
      isLoading: false, // 数据加载中
      selectData: [], // 选中的表格数据
      searchData: {}, // 搜索列表数据
      sortData: {}, // 排序字段
      searchResult: NaN, // 搜索结果数
      taskNumber: '', // 当前树形taskNumber
      workorderIds: '', // 当前树形工单ids
      checkedKeys: window.localStorage.getItem(this.$route.name), // 显示的列集合
      selectReocrd: false, // 工单列表勾选记录
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.workorderProgressTrace.listData
    },
    tableColConfig,
    // 列循环
    columnList() {
      this.$nextTick(() => {
        this.$refs.tableNode.doLayout()
      })
      let checkedKeysList = this.checkedKeys ? JSON.parse(this.checkedKeys) : this.tableColConfig.reduce((pre, cur) => [...pre, cur.prop], [])
      return this.tableColConfig.filter(item => item.noForCol !== true && (item.noChecked === true || checkedKeysList.some(key => key === item.prop)))
    },
  },
  mounted() {
    this.$refs.taskBomTree.init()
    this.init()
  },
  methods: {
    // 列筛选回调
    handleFilterChange(filters) {
      this.sortData = {}
      this.$refs.tableNode.clearSort()
      let filterParams = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, filterParams.search)
      Object.assign(this.sortData, filterParams.order)
      this.init()
    },
    // 修改列显示
    saveCol(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    // 刷新方法
    refresh() {
      this.taskNumber = ''
      if (!this.selectData.length) {
        this.getBatchList()
      }
      this.$refs.mesSearchs.clean()
      this.searchData = {}
      this.sortData = {}
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.selectData = []
      this.workorderIds = []
      this.$refs.taskBomTree.init()
      this.init()
    },
    // 选择树形节点
    selectNode(taskNumber, workorderIds) {
      this.taskNumber = taskNumber
      this.workorderIds = workorderIds
      if (!this.selectData.length) {
        this.getBatchList()
      }
      this.searchData = {}
      this.selectData = []
      this.init()
    },
    // 初始化列表数据
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/workorder/workorder/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : 5,
          sort: this.sortData,
          query: {
            columns: this.tableColConfig.reduce((pre, cur) => [...pre, cur.prop], []),
            ...this.searchData,
            viewSource: 6
          } // viewSource 视图来源，3表示生产调度工单
        },
        module: 'workorderProgressTrace',
        state: 'listData'
      }
      if (this.taskNumber) {
        postData.data.query.taskNumber = this.taskNumber
      }
      if (this.workorderIds.length) {
        postData.data.query.id = this.workorderIds.toString()
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 显示日志
    showLog(row) {
      this.$refs.logDetail.openDialog({
        title: '工单编号',
        name: row.number,
        url: 'a/workorderstatuschangehistory/workorderStatusChangeHistory/list',
        query: {
          workorderId: row.id
        }
      })
    },
    // 编辑
    _edit() {
      if (this.selectData.length === 1) {
        this.$router.push({
          name: 'workListReceiveDetail',
          params: {
            id: this.selectData[0].id
          }
        })
      }
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.$refs.tableNode.clearSort()
      this.sortData = {}
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 调度列表勾选
    handleSelectionChange(val) {
      this.selectData = val
      this.getBatchList()
    },
    // 批次清单列表获取
    getBatchList() {
      let workeroderMsg = this.taskNumber || this.workorderIds
      let ids = this.selectData.reduce((pre, cur) => [...pre, cur.id], []).join(',')
      this.$refs.NormalBatchList.refresh(ids, workeroderMsg)
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .work_progress_trace {
    height: 100%;
    .state_icon_word {
      padding-left: 3px;
    }
    .err_msg {
      .el-table__header-wrapper {
        display: none;
      }
      .el-table td {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
    }
  }
</style>
